import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/controllers/device/remind/note_dialog.dart';
import 'package:share_fit/app/controllers/device/remind/picker/model/date_mode.dart';
import 'package:share_fit/app/controllers/device/remind/picker/model/pduration.dart';
import 'package:share_fit/app/controllers/device/remind/picker/pickers.dart';
import 'package:share_fit/app/controllers/device/remind/picker/style/picker_style.dart';
import 'package:share_fit/app/controllers/device/remind/remind_item.dart';
import 'package:share_fit/app/controllers/device/remind/remind_logic.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/generated/locales.g.dart';

class RemindAddPage extends StatelessWidget {

  final logic = Get.put(RemindLogic());

  @override
  Widget build(BuildContext context) {
    logic.state.notes = "";
    logic.state.startDate=logic.state.endDate=PDuration();
    return Scaffold(
        resizeToAvoidBottomInset: false,
        // backgroundColor: Color(0xFFF5F9FB),
        appBar: AppBar(
          // backgroundColor: Color(0xFFF5F9FB),
          title: Text(LocaleKeys.remind_add.ts, style: TextStyle(fontSize: 54.sp, color: ColorConst.btnFontColor),),
          centerTitle: true,
          leading: BackBtnIcon(onTap: () => Get.back()),
          // leading: IconButton(
          //   padding: EdgeInsets.only(left: 15,),
          //   icon: Image.asset("assets/images/space/icon_appbar_arrow_back.png"),
          //   onPressed: () { Get.back(); },
          //   // child: Image.asset("images/icon_appbar_arrow_back.png"),
          // ),
          // leadingWidth: 25,
        ),
      body: Column(
        children: [
          Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.white
              ),
              margin: EdgeInsets.fromLTRB(42.w, 100.h, 42.w, 0),
              child: Column(
                children: [
                  GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap: ()=>{
                      showDialog(context: context, builder: (_){
                        return NoteTextDialog(title: LocaleKeys.remind_add_notes.ts, callback: (res){
                          // logic.setNotes(res);
                        },);
                      })
                      // showDialog(context: context, builder: (_){
                      //   return CupertinoDatePicker(onDateTimeChanged: (value){
                      //     print(value);
                      //   });
                      // })
                    },
                    child: Container(
                      padding: EdgeInsets.fromLTRB(56.w, 72.h, 36.w, 72.h),
                      child: Row(
                        children: [
                          Text(LocaleKeys.remind_notes.ts, style: TextStyle(fontSize: 42.sp),),
                          Expanded(child: Container()),
                          GetBuilder<RemindLogic>(
                              id: 'remind_notes',
                              builder: (_) {
                                return Text(logic.state.notes, style: TextStyle(fontSize: 42.sp),);
                              }),
                          SizedBox(width: 76.w,),
                          Image.asset("assets/images/space/icon_space_arrow.png", width: 8,height: 18,)
                        ],
                      ),
                    ),
                  ),
                  const Divider(height: 1,),
                  GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap: ()=>{
                      _pickerClick(context, PickerModel.START_DATE, DateMode.YMD)
                    },
                    child: Container(
                      padding: EdgeInsets.fromLTRB(56.w, 72.h, 36.w, 72.h),
                      child: Row(
                        children: [
                          Text(LocaleKeys.remind_start_time.ts, style: TextStyle(fontSize: 42.sp),),
                          Expanded(child: Container()),
                          GetBuilder<RemindLogic>(
                              id: 'update_start_pduration',
                              builder: (_){
                                return Text(checkData(logic.state.startDate), style: TextStyle(fontSize: 42.sp));}),
                          // Text('', style: TextStyle(fontSize: 42.sp),),
                          SizedBox(width: 76.w,),
                          Image.asset("assets/images/space/icon_space_arrow.png", width: 8,height: 18,)
                        ],
                      ),
                    ),
                  ),
                  const Divider(height: 1,),
                  GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap: ()=>{
                      _pickerClick(context, PickerModel.END_DATE, DateMode.YMD)
                    },
                    child: Container(
                      padding: EdgeInsets.fromLTRB(56.w, 72.h, 36.w, 72.h),
                      child: Row(
                        children: [
                          Text(LocaleKeys.remind_end_time.ts, style: TextStyle(fontSize: 42.sp),),
                          Expanded(child: Container()),
                          GetBuilder<RemindLogic>(
                              id: 'update_end_pduration',
                              builder: (_)=>Text(checkData(logic.state.endDate), style: TextStyle(fontSize: 42.sp),)),
                          // Text('', style: TextStyle(fontSize: 42.sp),),
                          SizedBox(width: 76.w,),
                          Image.asset("assets/images/space/icon_space_arrow.png", width: 8,height: 18,)
                        ],
                      ),
                    ),
                  ),
                ],
              )
          ),
          Expanded(child: Container()),
          Row(
            children: [
              Expanded(
                  child: Container(
                    height: 55,
                    margin: EdgeInsets.fromLTRB(15, 0, 15, 58),
                    child: ElevatedButton(
                      onPressed: () {
                        if(logic.state.notes.isEmpty) {
                          return;
                        }

                        if(logic.state.startDate.month==0&&logic.state.startDate.day==0
                            &&logic.state.startDate.hour==0&&logic.state.startDate.minute==0
                            &&logic.state.endDate.month==0&&logic.state.endDate.day==0
                            &&logic.state.endDate.hour==0&&logic.state.endDate.minute==0) {
                          return;
                        }

                        String startMonth = logic.state.startDate.month.toString().padLeft(2, '0');
                        String startDay = logic.state.startDate.day.toString().padLeft(2, '0');
                        String startHour = logic.state.startDate.hour.toString().padLeft(2, '0');
                        String startMinute = logic.state.startDate.minute.toString().padLeft(2, '0');

                        String endMonth = logic.state.endDate.month.toString().padLeft(2, '0');
                        String endDay = logic.state.endDate.day.toString().padLeft(2, '0');
                        String endHour = logic.state.endDate.hour.toString().padLeft(2, '0');
                        String endMinute = logic.state.endDate.minute.toString().padLeft(2, '0');

                        String time = "";
                        if(logic.state.startDate.month==logic.state.endDate.month && logic.state.startDate.day==logic.state.endDate.day) {
                          time = '$startMonth/$startDay $startHour:$startMinute-$endHour:$endMinute';
                        } else {
                          time = '$startMonth/$startDay $startHour:$startMinute-$endMonth/$endDay $startMinute-$endHour:$endMinute';
                        }
                        logic.addItem(RemindItem(logic.state.notes, time));
                        Get.back();
                      },
                      style: ButtonStyle(
                          backgroundColor: MaterialStateProperty.all(ColorConst.activeColor),
                          shape: MaterialStateProperty.all(RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10)
                          ))
                      ),
                      child: Text(LocaleKeys.person_save.ts, style: TextStyle(fontSize: 20, color: Colors.white, ),),
                    ),
                  )),
            ],
          )
        ],
      )
    );
  }

  String checkData(PDuration p) {
    String data = "";
    if(p.month==0) {
      return data;
    }
    String month = p.month.toString().padLeft(2, '0');
    String day = p.day.toString().padLeft(2, '0');
    String hour = p.hour.toString().padLeft(2, '0');
    String minute = p.minute.toString().padLeft(2, '0');
    data = '$month/$day $hour:$minute';
    return data;
  }

  void _pickerClick(BuildContext context, PickerModel model, DateMode dateMode) {
    if(model==PickerModel.START_DATE) {
      logic.setCommitText(LocaleKeys.remind_next.ts);
      logic.setTitleText(LocaleKeys.remind_start_date.ts);
    } else if(model==PickerModel.START_TIME) {
      logic.setCommitText(LocaleKeys.person_choice_submit.ts);
      logic.setTitleText(LocaleKeys.remind_start_time.ts);
    } else if(model==PickerModel.END_DATE) {
      logic.setCommitText(LocaleKeys.remind_next.ts);
      logic.setTitleText(LocaleKeys.remind_end_date.ts);
    } else if(model==PickerModel.END_DATE) {
      logic.setCommitText(LocaleKeys.person_choice_submit.ts);
      logic.setTitleText(LocaleKeys.remind_end_time.ts);
    }
    // logic.setDateMode(model==PickerModel.END_DATE?DateMode.HM:DateMode.YMD);

    var pickerStyle = PickerStyle(
      cancelButton: _bottomButton(LocaleKeys.person_choice_cancel.ts),
      commitButton: GetBuilder<RemindLogic>(
        id: 'update_commit_text',
        builder: (_) {
          return _bottomButton(logic.state.commitText);
        },
      ),
      headDecoration: _headDecoration(),
      title: GetBuilder<RemindLogic>(
        id: 'update_title_text',
        builder: (_) {
          return _titleView(logic.state.titleText);
        },
      ),
      textColor: ColorConst.btnFontColor,
    );

    Pickers.showDatePicker(
      context,
      mode: dateMode,
      pickerStyle: pickerStyle,
      onConfirm: (p) {
        print('longer >>> 返回开始日期数据：$p');
        if(logic.state.commitText==LocaleKeys.person_choice_submit.ts) {
          if(model==PickerModel.START_TIME) {
            logic.setStartTime(p);
          } else if(model==PickerModel.END_TIME) {
            logic.setEndTime(p);
          }
        } else {
          logic.setCommitText(LocaleKeys.person_choice_submit.ts);
          if(model==PickerModel.START_DATE) {
            logic.setTitleText(LocaleKeys.remind_start_time.ts);
            logic.setStartDate(p);
            Future.delayed(Duration(microseconds: 200), (){
              _pickerClick(context, PickerModel.START_TIME, DateMode.HM);
            });
          } else if(model==PickerModel.END_DATE) {
            logic.setTitleText(LocaleKeys.remind_end_time.ts);
            logic.setEndDate(p);
            Future.delayed(Duration(microseconds: 200), (){
              _pickerClick(context, PickerModel.END_TIME, DateMode.HM);
            });
          }
        }
        Navigator.pop(context);
      },
    );
  }

  Widget _titleView(String text) {
    return Center(child: Text(text, style: TextStyle(color: ColorConst.btnFontColor, fontSize: 54.sp),));
  }

  Widget _bottomButton(String text) {
    return Container(
      alignment: Alignment.center,
      padding: const EdgeInsets.only(left: 12, right: 22),
      child: Text(text,
          style: TextStyle(color: ColorConst.btnFontColor, fontSize: 42.sp)),
    );
  }

  Decoration _headDecoration() {
    return BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(8), topRight: Radius.circular(8)));
  }
}

enum PickerModel {
  START_DATE, START_TIME, END_DATE, END_TIME
}
